<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${music.name}"></title>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script th:src="@{/js/APlayer.min.js}" src="js/APlayer.min.js"></script>
    <link rel="stylesheet" th:href="@{/css/APlayer.min.css}" href="css/APlayer.min.css">
    <style>
        .playerContainer {
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translate(-50%, -50%);
            width: 100%;
        }

        .mplayer {
            width: 80%;
        }
    </style>
</head>
<body>
<input id="musicUrl" type="hidden" th:value="${music.url}">
<input id="musicAuthor" type="hidden" th:value="${music.author}">
<input id="musicTitle" type="hidden" th:value="${music.name}">
<div class="playerContainer">
    <div id="aplayer" class="mplayer"></div>
</div>
<script>
    let name = $("#musicTitle").val();
    let url = $("#musicUrl").val();
    let artist = $("#musicAuthor").val() === '' ? '未知歌手' : $("#musicAuthor").val();
    const cover = "http://img.hwy-study.xyz/music/music.png";
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        audio: [{
            name: name,
            artist: artist,
            url: url,
            cover: cover,
            theme: '#FADFA3'
        }]
    });
</script>
</body>
</html>